<template>
  <div clsss="edit-info">
    <el-dialog
      v-model="dialogVisible"
      :title="titleInfo"
      width="50%"
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <el-form
        ref="listQueryRef"
        :rules="listQueryRules"
        :model="listQuery"
        label-width="120"
      >
        <el-form-item
          label="公司名称
"
          prop="name"
        >
          <el-input
            class="!w-[300px]"
            v-model="listQuery.name"
            placeholder="请输入公司名称 "
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="贷款金额(万元)
        "
          prop="loan_money"
        >
          <el-input
            class="!w-[300px]"
            v-model="listQuery.loan_money"
            placeholder="请输入贷款银行
        "
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="利率(%)
        "
          prop="interest_rate"
        >
          <el-input
            class="!w-[300px]"
            v-model="listQuery.interest_rate"
            placeholder="请输入利率
        "
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="法人代表
      "
          prop="legal"
        >
          <el-select
            clearable
            class="select-box"
            v-model="listQuery.legal"
            placeholder="请选择法人代表"
          >
            <el-option
              v-for="item in legalList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="贷款银行
        "
          prop="register_fund"
        >
          <el-input
            class="!w-[300px]"
            v-model="listQuery.loan_bank"
            placeholder="请输入贷款银行
        "
            autocomplete="off"
            clearable
          />
        </el-form-item>

        <el-form-item label="税务等级" prop="tax_level">
          <el-select
            clearable
            class="select-box"
            v-model="listQuery.tax_level"
            placeholder="请选择法人代表"
          >
            <el-option
              v-for="item in taxLevelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="经营范围
        "
          prop="business"
        >
          <el-input
            class="!w-[300px]"
            v-model="listQuery.business"
            placeholder="请输入经营范围
        "
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="企业注册地址

        "
          prop="address"
        >
          <el-input
            class="!w-[300px]"
            v-model="listQuery.address"
            placeholder="请输入企业注册地址

        "
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item label="贷款开始时间" prop="loan_start">
          <el-date-picker
            style="width: 300px"
            v-model="listQuery.loan_start"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择企业成立时间"
          />
        </el-form-item>
        <el-form-item label="高管" prop="officer">
          <el-select
            class="select-box"
            clearable
            v-model="listQuery.officer"
            multiple
            @change="selectChange"
            placeholder="请选择高管"
          >
            <el-option
              v-for="item in legalList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="股东" prop="officer">
          <el-select
            class="select-box"
            clearable
            v-model="listQuery.shareholder"
            multiple
            @change="selectChange"
            placeholder="请选择"
          >
            <el-option
              v-for="item in legalList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose" type="danger">取消</el-button>
          <el-button type="primary" @click="handleSubmit"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { getSessionKey } from "@/utils/auth";
import { peopleSelect } from "@/api/companyList";
import {
  reactive,
  ref,
  inject,
  onMounted,
  defineProps,
  defineEmits,
  nextTick,
  defineExpose,
  watch
} from "vue";
const listQueryRef = ref("");
const dataObj = ref({});
const titleText = ref("");
const listQuery = reactive({
  name: "",
  tax_code: "",
  legal: "",
  register_fund: "",
  tax_level: "",
  business: "",
  address: "",
  establish_time: "",
  officer: "",
  shareholder: "",
  admin_id: getSessionKey().admin_id
});
const taxLevelList = ref([
  {
    name: "小规模",
    id: 1
  },
  {
    name: "一般纳税人",
    id: 2
  }
]);
const validateCreditCode = (rule, value, callback) => {
  const reg = /^[0-9ABCDEFGHJKLMNPQRSTWXYZ]{18}$/;
  if (!value) {
    return callback(new Error("社会信用代码不能为空"));
  } else if (!reg.test(value)) {
    return callback(new Error("社会信用代码格式不正确"));
  } else {
    callback();
  }
};
onMounted(() => {
  getList();
});
const dialogVisible = ref(false);
const opneDialogVisible = data => {
  if (props.isEdit == "1") {
    const rowData = JSON.parse(JSON.stringify(data));
    console.log(rowData, "=---参数");
    const numberArray = rowData?.officer.split(",");
    const shareholderArray = rowData?.shareholder.split(",");
    rowData.officer = numberArray.map(Number);
    rowData.shareholder = shareholderArray.map(Number);
    listQuery.id = rowData.id;
    listQuery.name = rowData.name;
    listQuery.tax_code = rowData.tax_code;
    listQuery.legal = rowData.legal;
    listQuery.register_fund = rowData.register_fund;
    listQuery.tax_level = rowData.tax_level;
    listQuery.business = rowData.business;
    listQuery.address = rowData.address;
    listQuery.establish_time = rowData.establish_time;
    listQuery.officer = rowData.officer;
    listQuery.shareholder = rowData.shareholder;
  } else {
    listQuery.name = "";
    listQuery.name = "";
    listQuery.tax_code = "";
    listQuery.legal = "";
    listQuery.register_fund = "";
    listQuery.tax_level = "";
    listQuery.business = "";
    listQuery.address = "";
    listQuery.establish_time = "";
    listQuery.officer = "";
    listQuery.shareholder = "";
  }
  dialogVisible.value = true;
};

const getList = async () => {
  const obj = {
    name: ""
  };
  const res = await peopleSelect(obj);
  if (res.code == 200) {
    const dataList = res.data;
    legalList.value = dataList;
  }
};
const legalList = ref([]);
const listQueryRules = {
  name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
  tax_code: [
    { required: true, message: "请输入社会信用代码", trigger: "blur" },
    { validator: validateCreditCode, trigger: "change" }
  ],
  legal: [{ required: true, message: "请输入法人代表", trigger: "blur" }]
};
const props = defineProps({
  titleInfo: {
    type: String,
    default: ""
  },
  isEdit: {
    type: String,
    default: ""
  }
});
const handleClose = () => {
  listQueryRef.value.resetFields(); // 清除表单校验以及表单数据初始化
  dialogVisible.value = false;
};
const disabledDate = time => {
  return time.getTime() > Date.now();
};
const emit = defineEmits(["handleSubmit"]);
const handleSubmit = () => {
  listQueryRef.value.validate(valid => {
    if (valid) {
      // 添加
      const parmas = listQuery;
      // parmas.admin_id = getSessionKey().admin_id;
      emit("handleSubmit", parmas);
    }
  });
};
defineExpose({ opneDialogVisible }); //子组件需要把数据导出去
</script>

<style lang="scss" scoped>
.select-box {
  width: 300px;
}
</style>
